<!-- <template>
  <a-tree class="draggable-tree" v-model="checkedCategoryKeys" :tree-data="categoryTree" :replace-fields="defaultProps"
    :highlight-current="true" :expand-on-click-node="false" :default-expanded-keys="defaultExpand" @check="treeNodeCheck"
    @select="onEventTreeNodeSelected" blockNode draggable @drop="onDrop" @dragenter="dragenter" />
</template>

<script>
// generateData(z);
export default {
  data() {
    return {
      eventSelectedNode: null,
      checkedCategoryKeys: [],
      //编辑里树节点映射值
      defaultProps: {
        children: 'subGroupList',
        title: 'groupName',
        key: 'id',
      },
      defaultExpand: [], //默认展开节点
      categoryTree: [{
        id: 1,
        groupCode: '00',
        groupName: '名称1',
        groupSort: 1,
        groupLevel: 1,
        subGroupList: [{
          id: 11,
          groupCode: '00-01',
          groupName: '名称1-1',
          groupSort: 1,
          groupLevel: 2,
          subGroupList: [{
            id: 111,
            groupCode: '00-01-01',
            groupName: '名称1-1-1',
            groupSort: 1,
            groupLevel: 3,
            subGroupList: []
          }, {
            id: 112,
            groupCode: '00-01-02',
            groupName: '名称1-1-2',
            groupSort: 1,
            groupLevel: 3,
            subGroupList: []
          }, {
            id: 113,
            groupCode: '00-01-03',
            groupName: '名称1-1-3',
            groupSort: 1,
            groupLevel: 3,
            subGroupList: []
          }]
        }, {
          id: 12,
          groupCode: '00-02',
          groupName: '名称1-2',
          groupSort: 2,
          groupLevel: 2,
          subGroupList: []
        }, {
          id: 13,
          groupCode: '00-03',
          groupName: '名称1-3',
          groupSort: 3,
          groupLevel: 2,
          subGroupList: []
        }, {
          id: 14,
          groupCode: '00-04',
          groupName: '名称1-4',
          groupSort: 4,
          groupLevel: 2,
          subGroupList: []
        }, {
          id: 15,
          groupCode: '00-05',
          groupName: '名称1-5',
          groupSort: 5,
          groupLevel: 2,
          subGroupList: []
        }, {
          id: 16,
          groupCode: '00-06',
          groupName: '名称1-6',
          groupSort: 6,
          groupLevel: 2,
          subGroupList: []
        }]
      }, {
        id: 2,
        groupCode: '00',
        groupName: '名称2',
        groupSort: 2,
        groupLevel: 1,
        subGroupList: [{
          id: 21,
          groupCode: '00-01',
          groupName: '名称2-1',
          groupSort: 1,
          groupLevel: 2,
          subGroupList: [{
            id: 211,
            groupCode: '00-01-01',
            groupName: '名称2-1-1',
            groupSort: 1,
            groupLevel: 3,
            subGroupList: []
          }, {
            id: 212,
            groupCode: '00-01-02',
            groupName: '名称2-1-2',
            groupSort: 1,
            groupLevel: 3,
            subGroupList: []
          }, {
            id: 213,
            groupCode: '00-01-03',
            groupName: '名称2-1-3',
            groupSort: 1,
            groupLevel: 3,
            subGroupList: []
          }]
        }, {
          id: 22,
          groupCode: '00-02',
          groupName: '名称2-2',
          groupSort: 2,
          groupLevel: 2,
          subGroupList: []
        }, {
          id: 23,
          groupCode: '00-03',
          groupName: '名称2-3',
          groupSort: 3,
          groupLevel: 2,
          subGroupList: []
        }]
      }],
      expandedKeys: [],
    };
  },
  created() {
    this.defaultExpand = [1]
  },
  methods: {
    onEventTreeNodeSelected(seleteKeys, e) {
      this.eventSelectedNode = e.node
    },
    //选择的tree
    treeNodeCheck(checkedKeys) {
      this.checkedCategoryKeys = checkedKeys
    },
    dragenter(info) {
      if (info.node.dataRef.groupLevel !== info.dragNode.dataRef.groupLevel) {
        this.$message.warning('只允许在同级节点拖拽！')
        return false
      }
    },
    onDrop(info) {
      // console.log(info)
      const dropKey = info.node.eventKey
      const dragKey = info.dragNode.eventKey

      const dropPos = info.node.pos.split('-')
      const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
      console.log(dropKey, dragKey, dropPos, dropPosition, info.node.dataRef.groupLevel, info.dragNode.dataRef.groupLevel)
      if (info.node.dataRef.groupLevel !== info.dragNode.dataRef.groupLevel) {
        this.$message.warning('只允许在同级节点拖拽！')
        return false
      }
      const loop = (data, key, callback) => {
        data.forEach((item, index, arr) => {
          if (item.id === key) {
            return callback(item, index, arr)
          }
          if (item.subGroupList) {
            return loop(item.subGroupList, key, callback)
          }
        })
      }
      const data = [...this.categoryTree]

      // Find dragObject
      let dragObj
      loop(data, dragKey, (item, index, arr) => {
        arr.splice(index, 1)
        dragObj = item
      })
      if (!info.dropToGap) {
        // Drop on the content
        loop(data, dropKey, (item) => {
          item.subGroupList = item.subGroupList || []
          // where to insert 示例添加到尾部，可以是随意位置
          item.subGroupList.push(dragObj)
        })
      } else if (
        (info.node.subGroupList || []).length > 0 && // Has children
        info.node.expanded && // Is expanded
        dropPosition === 1 // On the bottom gap
      ) {
        loop(data, dropKey, (item) => {
          item.subGroupList = item.subGroupList || []
          // where to insert 示例添加到尾部，可以是随意位置
          item.subGroupList.unshift(dragObj)
        })
      } else {
        let ar
        let i
        loop(data, dropKey, (item, index, arr) => {
          ar = arr
          i = index
        })
        if (dropPosition === -1) {
          ar.splice(i, 0, dragObj)
        } else {
          ar.splice(i + 1, 0, dragObj)
        }
      }
      this.categoryTree = data
    },
  },
};
</script> -->
